﻿@inject DataSource Data


<FluentDataGrid Items="@FilteredItems" ResizableColumns=true Pagination="@pagination" TGridItem="Country" OnRowFocus="HandleRowFocus" GridTemplateColumns="0.2fr 1fr 0.2fr 0.2fr 0.2fr 0.2fr" style="height: 405px; overflow:auto;">
    <TemplateColumn Title="Rank" SortBy="@rankSort" Align="Align.Center">
        <img class="flag" src="_content/FluentUI.Demo.Shared/flags/@(context.Code).svg" alt="Flag of @(context.Code)"/>
    </TemplateColumn>
    @*<PropertyColumn Property="@(c => c.Name)" InitialSortDirection=SortDirection.Descending Sortable="true" Comparer="@StringLengthComparer.Instance">
        <ColumnOptions>
            <div class="search-box">
                <FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" AfterBindValue="HandleClear" Placeholder="Country name..." />
            </div>
        </ColumnOptions>
    </PropertyColumn>*@
    <TemplateColumn Title="Name" InitialSortDirection=SortDirection.Descending SortBy="@nameSort" IsDefaultSortColumn=true>
        <ColumnOptions>
            <div class="search-box">
                <FluentSearch type="search" Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" @bind-Value:after="HandleClear" Placeholder="Country name..." />
            </div>
        </ColumnOptions>
        <ChildContent>
            @(context.Name)
        </ChildContent>
    </TemplateColumn>
    <PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" Align="Align.Start" />
    <PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" Align="Align.Center" />
    <PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" Align="Align.End" />
    <PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" Align="Align.End" />
</FluentDataGrid>


<FluentPaginator State="@pagination">
    <SummaryTemplate>
        There are <strong>@(pagination.TotalItemCount ?? 0)</strong> rows
    </SummaryTemplate>
    <PaginationTextTemplate>
        This is page <strong>@(pagination.CurrentPageIndex + 1)</strong> out of a total of <strong>@(pagination.LastPageIndex + 1)</strong> pages
    </PaginationTextTemplate>
</FluentPaginator>

@code {
    IQueryable<Country>? items;
    PaginationState pagination = new PaginationState { ItemsPerPage = 10 };
    string nameFilter = string.Empty;

    GridSort<Country> rankSort = GridSort<Country>
        .ByDescending(x => x.Medals.Gold)
        .ThenDescending(x => x.Medals.Silver)
        .ThenDescending(x => x.Medals.Bronze);

    // Uncomment line below when using the TemplateColumn example for the country _name
    GridSort<Country> nameSort = GridSort<Country>.ByAscending(x => x.Name, StringLengthComparer.Instance);


    IQueryable<Country>? FilteredItems => items?.Where(x => x.Name.Contains(nameFilter, StringComparison.CurrentCultureIgnoreCase));

    protected override async Task OnInitializedAsync()
    {
        items = (await Data.GetCountriesAsync()).AsQueryable();
    }

    private void HandleCountryFilter(ChangeEventArgs args)
    {
        if (args.Value is string value)
        {
            nameFilter = value;
        }
    }

    private void HandleClear()
    {
        if (string.IsNullOrWhiteSpace(nameFilter))
        {
            nameFilter = string.Empty;
        }
    }

    public class StringLengthComparer : IComparer<string>
    {
        public static readonly StringLengthComparer Instance = new StringLengthComparer();

        public int Compare(string? x, string? y)
        {
            if (x is null)
            {
                return y is null ? 0 : -1;
            }

            if (y is null)
            {
                return 1;
            }

            return x.Length.CompareTo(y.Length);
        }
    }

    private void HandleRowFocus(FluentDataGridRow<Country> row)
    {
        Console.WriteLine($"Row focused: {row.Item?.Name}");
    }
}
